<#include "/main.ftl"/>
<body>
<@diamondNav/>
<div id="content-wrapper" style="position: relative;;margin-left: 13%;width: auto" >
    <div class="panel-body" style="padding-bottom:0px;">
        <div class="panel panel-default" >
            <div class="panel-heading">查询条件</div>
            <div class="panel-body" style="padding:2px">
                <form id="formSearch" class="form-horizontal">
                    <div class="" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="interfaceType">接口类型</label>
                        <div class="col-sm-3">
                            <select id="interfaceType" class="form-control">
                                <option value="http">http</option>
                                <option value="webService">webService</option>
                                <option value="restful">restful</option>
                                <option value="dubbo">dubbo</option>
                            </select>
                        </div>
                        <div class="" style="margin-top:15px">
                            <label class="control-label col-sm-1" for="interfaceAliasName">接口别名</label>
                            <div class="col-sm-3">
                                <input type="text" class="form-control" id="interfaceAliasName">
                            </div>

                            <div class="col-sm-4" style="text-align:left;">
                                <button type="button" style="margin-left:50px" id="btn_query" class="btn  btn-success btnFont">
                                    查询
                                </button>
                            </div>
                        </div>
                </form>

            </div>
        </div>

        <div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
            <button id="btn_bindHeader" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-wrench" aria-hidden="true"></span>批量绑定headers
            </button>
            <button id="btn_bindCase" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-briefcase" aria-hidden="true"></span>维护测试用例
            </button>
            <button id="btn_runInterface" type="button" class="btn btn-default">
                <span class="glyphicon glyphicon-play" aria-hidden="true"></span>按照接口运行用例
            </button>
        </div>
        <table id="dataTable"></table>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">绑定headers</h4>
                </div>
                <div class="modal-body" id="headerBody">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="btn_bindHeadersSubmit" class="btn btn-primary">提交更改</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>

<script type="text/javascript">
    $(document).ready(function () {
        //1.初始化Table
        var url= '/interfaceTestController/getInterfaceTest';
        var columns= [
                        {
                            checkbox: true
                        },
                        {
                            field: 'interfaceAliasName',
                            title: '接口别名'
                        }, {
                            field: 'interfaceName',
                            title: '接口名称'
                        }, {
                            field: 'interfaceMethod',
                            title: '方法名'
                        },
                        {
                            field: 'interfaceType',
                            title: '接口类型'
                        }, {
                            field: 'encoding',
                            title: '编码'
                        },
                        {
                            field: 'headers',
                            title: '消息头'
                        },
                        {
                            field: 'interfaceDesc',
                            title: '描述'
                        },];
        var query =function (params) {
                    var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                        pageSize: params.limit,   //页面大小
                        pageNo: params.offset,  //页码
                        interfaceAliasName: $("#interfaceAliasName").val(),
                        interfaceType: $("#interfaceType").val(),
                        projectId: projectId
                    }
                    return temp;
                    };
        var oTable = new PublicTableInit();
        oTable.Init(url,columns,query);

        //2.初始化Button的点击事件
        var oButtonInit = new ButtonInit();
        oButtonInit.Init();

    });



    // var TableInit = function () {
    //     var oTableInit = new Object();
    //     //初始化Table
    //     oTableInit.Init = function () {
    //         $('#dataTable').bootstrapTable({
    //             url: '/interfaceTestController/getInterfaceTest',         //请求后台的URL（*）
    //             method: 'get',                      //请求方式（*）
    //             toolbar: '#toolbar',                //工具按钮用哪个容器
    //             striped: true,                      //是否显示行间隔色
    //             cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    //             pagination: true,                   //是否显示分页（*）
    //             sortable: false,                     //是否启用排序
    //             sortOrder: "asc",                   //排序方式
    //             queryParams: oTableInit.queryParams,//传递参数（*）,这里对应的是一个javascript的function方法
    //             sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
    //             pageNumber: 1,                       //初始化加载第一页，默认第一页
    //             pageSize: 10,                       //每页的记录行数（*）
    //             pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
    //             search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
    //             strictSearch: false,
    //             showColumns: false,                  //是否显示所有的列
    //             showRefresh: true,                  //是否显示刷新按钮
    //             minimumCountColumns: 2,             //最少允许的列数
    //             clickToSelect: true,                //是否启用点击选中行
    //             height: 550,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
    //             uniqueId: "id",        //每一行的唯一标识，一般为主键列
    //             showToggle: false,                    //是否显示详细视图和列表视图的切换按钮
    //             cardView: false,                    //是否显示详细视图
    //             detailView: false,                   //是否显示父子表
    //             columns: [
    //                 {
    //                     checkbox: true
    //                 },
    //                 {
    //                     field: 'interfaceAliasName',
    //                     title: '接口别名'
    //                 }, {
    //                     field: 'interfaceName',
    //                     title: '接口名称'
    //                 }, {
    //                     field: 'interfaceMethod',
    //                     title: '方法名'
    //                 },
    //                 {
    //                     field: 'interfaceType',
    //                     title: '接口类型'
    //                 }, {
    //                     field: 'encoding',
    //                     title: '编码'
    //                 },
    //                 {
    //                     field: 'headers',
    //                     title: '消息头'
    //                 },
    //                 {
    //                     field: 'interfaceDesc',
    //                     title: '描述'
    //                 },]
    //         });
    //     };
    //
    //     //得到查询的参数
    //     oTableInit.queryParams = function (params) {
    //         var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
    //             pageSize: params.limit,   //页面大小
    //             pageNo: params.offset,  //页码
    //             interfaceAliasName: $("#interfaceAliasName").val(),
    //             interfaceType: $("#interfaceType").val(),
    //             projectId: projectId
    //         };
    //         // //1.首先new一个对象
    //         // var obj={};
    //         // //2.给对象设置值
    //         // obj.pageNo="" ;
    //         // obj.pageSize=""
    //         // //3.bootstraptable 会提供好获取的行数 和页数
    //         // //params.limit  页面的大小，也就是每页显示多少行数据,前端的参数，bootstarttable内部的变量
    //         // //params.offset 页面的页数，也就是目前显示第几页的数据，前端的参数，bootstarttable内部的变量
    //         // obj.pageSize=params.limit;
    //         // obj.pageNo=params.offset;
    //         // obj.interfaceName=null;
    //         //4.返回这个对象 return
    //         // return obj;
    //
    //         return temp;
    //     };
    //     return oTableInit;
    // };


    var ButtonInit = function () {
        var oInit = new Object();
        oInit.Init = function () {
            $("#btn_add").click(function () {
                var projectId = $("#selectProject").children('option:selected').val();
                window.location.href = "${base}/interfaceTestController/editInterfaceTestPage?interfaceType=" + $("#interfaceType").val() + "&projectId=" + projectId;
            });

            $("#btn_edit").click(function () {
                var arrselections = $("#dataTable").bootstrapTable('getSelections');
                if (arrselections.length > 1) {
                    toastr.warning('只能选择一行进行编辑');
                    return;
                }
                if (arrselections.length <= 0) {
                    toastr.warning('请选择一条数据进行修改');
                    return;
                }
                window.location.href =
                        "${base}/interfaceTestController/editInterfaceTestPage?interfaceId=" + arrselections[0].interfaceId;
            });

            $("#btn_delete").click(function () {
                var arrselections = $("#dataTable").bootstrapTable('getSelections');
                if (arrselections.length <= 0) {
                    toastr.warning('请选择有效数据');
                    return;
                }

                Ewin.confirm({message: "确认要删除选择的数据吗？"}).on(function (e) {
                    if (!e) {
                        return;
                    }
                    $.ajax({
                        type: "post",
                        url: "${base}/interfaceTestController/deleteInterfaceTest",
                        data: {interfaceTestId: arrselections[0].interfaceId},
                        success: function (result) {
                            if (result.success) {
                                toastr.success('删除数据成功');
                                $("#dataTable").bootstrapTable('refresh');
                            } else {
                                toastr.error(result.msg)
                                // $(".modal-body").text(result.msg);
                                // $("#myModal").modal();
                            }
                        },
                        error: function () {
                            toastr.error('Error');
                        },
                        complete: function () {

                        }

                    });
                });
            });

            $("#btn_bindHeader").click(function () {
                var arrselections = $("#dataTable").bootstrapTable('getSelections');
                if (arrselections.length <= 0) {
                    toastr.warning('请至少选择一条接口数据');
                    return;
                }
                $.ajax({
                    type: "post",
                    url: "${base}/projectController/getHeaders",
                    data: {projectId:projectId},
                    beforeSend: function () {
                        $("#headerBody").empty()
                    },
                    success: function (result) {
                        if (result.success) {
                            var headers = result.obj;
                            for(var key in headers){
                                $("#headerBody").append("<div><input type='checkbox' name=\"header\"" +
                                        "key='" + key + "' value='" + headers[key] + "'  >" + key + ":" + headers[key] + "</input></div>");
                            }
                            $("#myModal").modal();
                        } else {
                            toastr.error(result.msg)
                        }
                    }
                    ,
                    error: function () {
                        toastr.error('Error');
                    }
                });
            });
            $("#btn_bindHeadersSubmit").click(function () {
                var arrselections = $("#dataTable").bootstrapTable('getSelections');
                var l = arrselections.length;
                var interfaceIds = [];
                for (var i = 0; i < l; i++) {
                    interfaceIds.push(arrselections[i].interfaceId)
                }
                var url = "${base}/interfaceTestController/bindHeaders";
                var oKeyValueUtil =new KeyValueUtil();
                var headerJsonMap=oKeyValueUtil.getDataMapJson($("input[name='header']"));
                $.ajax({
                    url: url,
                    type: "post",
                    traditional: true,
                    data: {
                        interfaceIds: interfaceIds,
                        headers: headerJsonMap
                    },
                    success: function (result) {
                        if (result.success) {
                            toastr.success(result.msg);
                            //主动刷新表格的方法
                            $("#dataTable").bootstrapTable('refresh');
                        } else {
                            toastr.error(result.msg)
                        }
                    }
                })
                $('#myModal').modal('hide');
            });
            $("#btn_bindCase").click(function () {
                var arrselections = $("#dataTable").bootstrapTable('getSelections');
                if (arrselections.length <= 0) {
                    toastr.warning('请至少选择一条接口数据');
                    return;
                }
                if (arrselections.length > 1) {
                    toastr.warning('只能选择一行进行编辑');
                    return;
                }
                var interfaceId= arrselections[0].interfaceId;
                var interfaceMethod =arrselections[0].interfaceMethod;
                window.location.href="${base}/testCaseController/testPage?interfaceId="+interfaceId+"&interfaceMethod="+interfaceMethod;
            });
            $("#btn_runInterface").click(function () {
                var arrselections = $("#dataTable").bootstrapTable('getSelections');
                if (arrselections.length <= 0) {
                    toastr.warning('请至少选择一条接口数据');
                    return;
                }
                var interfaceIds=[];
                for (var i = 0; i < arrselections.length; i++) {
                    interfaceIds.push(arrselections[i].interfaceId)
                }
                runTest.runTestByInterface(interfaceIds);
            });
            $("#btn_query").click(function () {
                $("#dataTable").bootstrapTable('refresh');
            });
        };

        return oInit;
    };
</script>